<template>
  <div class="chart-container" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'
import { useResize } from '~/utils/resize'

export default {
  name: 'PassQuantity',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const chart = ref(null)
    let myChart = null

    const initChart = () => {
      if (!chart.value)  return

      myChart = echarts.init(chart.value)
      const option = {
        title: {
          text: props.title,
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei'
          },
          top: 10
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(13, 42, 67, 0.9)',
          borderColor: '#4fd8de',
          borderWidth: 1,
          padding: [8, 12],
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(79, 216, 222, 0.2)'
            }
          },
          formatter: params => {
            return `<div style="font-weight:bold">${params[0].name}</div>
                    <div style="display:flex;align-items:center;margin-top:5px">
                      <span style="display:inline-block;width:10px;height:10px;background:${params[0].color};margin-right:5px"></span>
                      数量: <span style="font-weight:bold;margin-left:5px">${params[0].value}</span>
                    </div>`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: 60,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: props.data.map(item  => item.name),
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.6)'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 12,
            interval: 0,
            rotate: 30,
            margin: 15
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)',
              type: 'dashed'
            }
          }
        },
        series: [{
          name: '数量',
          type: 'bar',
          barWidth: '40%',
          data: props.data.map(item  => item.value),
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0,  0, 0, 1, [
              { offset: 0, color: '#4fd8de' },
              { offset: 0.7, color: '#0b5de8' },
              { offset: 1, color: '#0a3d8f' }
            ]),
            borderRadius: [4, 4, 0, 0],
            shadowColor: 'rgba(79, 216, 222, 0.5)',
            shadowBlur: 8,
            shadowOffsetY: 3
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0,  0, 0, 1, [
                { offset: 0, color: '#ffd666' },
                { offset: 0.7, color: '#faad14' },
                { offset: 1, color: '#d48806' }
              ]),
              shadowColor: 'rgba(255, 214, 102, 0.5)',
              shadowBlur: 12
            }
          },
          label: {
            show: true,
            position: 'top',
            color: '#fff',
            fontSize: 12,
            formatter: '{c}'
          },
          animationDelay: function (idx) {
            return idx * 100
          }
        }],
        animationEasing: 'elasticOut',
        animationDuration: 1500
      }

      myChart.setOption(option)
    }

    onMounted(() => {
      initChart()
      useResize(myChart)
    })

    watch(() => props.data,  () => {
      if (myChart) {
        myChart.setOption({
          xAxis: {
            data: props.data.map(item  => item.name)
          },
          series: [{
            data: props.data.map(item  => item.value)
          }]
        })
      }
    }, { deep: true })

    return { chart }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  background: rgba(13, 42, 67, 0.3);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(79, 216, 222, 0.15);
}
</style>